<template>
  <div>
    <div class="like-article">
        <van-icon
          :color="LikeArticle === 1 ? 'red' : '#777'"
          :name="LikeArticle === 1 ? 'good-job' : 'good-job-o'"

          :loading="loading"
          @click="onCollect"
        /> 
    </div>
  </div>
</template>

<script>
import {likeArticle,NotLikeArticle} from '@/api/article'
export default {
    name:'LikeArticle',
    model:{
        prop:'LikeArticle',
        event:'cheack'
    },
    props:{
        LikeArticle:{
            type:Number,
            required:true
        },
        articleID:{
            type:[Number,String,Object],
            required:true
        }
    },
    data() {
        return {
            loading: false
        }
    },
    methods:{
         async onCollect(){
            this.loading = true
            try{
                let status = -1
                if(this.LikeArticle === 1){
                    //已点赞，取消点赞
                    await NotLikeArticle(this.articleID)
                    status = -1
                }else{
                    //未点赞，点赞
                    await likeArticle(this.articleID)
                    status = 1
                }
             //更新视图
             this.$emit('cheack',status)
             this.$toast.success(status===1 ? '点赞+1': '点赞-1')   
            }catch(err){
                this.$toast.fail('操作失败，稍后重试')
            }
            this.loading = false
        }
    }
}
</script>

<style>

</style>